<template>
    <div class="search">
        <el-card header="会员信息1">
            <VoSchemaForm :model="model1" :schema="schema1">
                <template v-slot:footer>
                    <span></span>
                </template>
                <template v-slot:search>
                    <div class="search-bar">
                        <el-button round icon="el-icon-refresh" @click="handleReset1">重置</el-button>
                        <el-button type="primary" round icon="el-icon-search" @click="handleSerch1">搜索</el-button>
                        <el-button type="text" icon="el-icon-sort" @click="handleFold1"></el-button>
                    </div>
                </template>
            </VoSchemaForm>
            <pre>{{modelJson1}}</pre>
            <VoSchemaTable :data="data1" :columns="columns"></VoSchemaTable>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template v-slot:header>
                <div class="search-header2">
                    <span>会员信息2</span>
                    <div>
                        <el-button round icon="el-icon-refresh" size="mini" @click="handleReset2">重置</el-button>
                        <el-button type="primary" round icon="el-icon-search" size="mini" @click="handleSerch2">搜索</el-button>
                        <el-button type="text" icon="el-icon-sort" size="mini" @click="handleFold2"></el-button>
                    </div>
                </div>
            </template>
            <VoSchemaForm :model="model2" :schema="schema2">
                <template v-slot:footer>
                    <span></span>
                </template>
            </VoSchemaForm>
            <pre>{{modelJson2}}</pre>
            <VoSchemaTable :data="data2" :columns="columns"></VoSchemaTable>
        </el-card>

        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/sf-search.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            data: [
                { id: 1, name: '燃烧的腿毛', phone: '13522223333', sex: '女', vip: 'vip1', type: '普通用户', status: '在线' },
                { id: 2, name: '燃烧的胸毛', phone: '13546548888', sex: '男', vip: 'vip2', type: 'Vip用户', status: '离线' },
                { id: 3, name: '--分割线--', phone: '13277778888', sex: '保密', vip: 'vip3', type: 'Vip用户', status: '离开' },
                { id: 4, name: '燃烧的鼻毛', phone: '13522224444', sex: '男', vip: 'vip4', type: 'Vip用户', status: '冻结' },
                { id: 5, name: '老司机', phone: '15922224444', sex: '男', vip: 'vip5', type: 'Vip用户', status: '注销' },
                { id: 6, name: '扛把子', phone: '13642162444', sex: '女', vip: 'svip', type: 'svip用户', status: '在线' }
            ],
            fold1: false,
            model1: {},
            modelJson1: null,
            schema1: {
                properties: {
                    name_like: {
                        model: 'name',
                        widget: 'input',
                        label: '会员名称',
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    phone_like: {
                        model: 'phone',
                        widget: 'input',
                        label: '电话',
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    sex_eq: {
                        model: 'sex',
                        widget: 'select',
                        label: '性别',
                        enum: [
                            { label: '男', value: '男' },
                            { label: '女', value: '女' },
                            { label: '保密', value: '保密' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        }
                    },
                    vip_eq: {
                        model: 'vip',
                        widget: 'select',
                        label: 'Vip',
                        asyncData(resolve) {
                            const result = new Array(5).fill('').map((e, index) => {
                                return { label: `vip${index + 1}`, value: `vip${index + 1}` }
                            })
                            result.push({
                                label: 'svip',
                                value: 'svip'
                            })
                            resolve(result)
                        },
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        },
                        if: () => {
                            return !this.fold1
                        }
                    },
                    type_eq: {
                        model: 'type',
                        widget: 'select',
                        label: '用户类型',
                        enum: [
                            { label: '普通用户', value: '普通用户' },
                            { label: 'Vip用户', value: 'Vip用户' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        },
                        if: () => {
                            return !this.fold1
                        }
                    },
                    status_eq: {
                        model: 'status',
                        widget: 'select',
                        label: '用户状态',
                        enum: [
                            { label: '在线', value: '在线' },
                            { label: '离线', value: '离线' },
                            { label: '离开', value: '离开' },
                            { label: '冻结', value: '冻结' },
                            { label: '注销', value: '注销' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        },
                        if: () => {
                            return !this.fold1
                        }
                    },
                    search: {
                        model: 'search',
                        widget: 'customItem',
                        col: {
                            span: 12
                        }
                    }
                },
                ui: {
                    labelWidth: 'auto'
                },
                row: {
                    type: 'flex',
                    style: {
                        flexWrap: 'wrap'
                    },
                    gutter: 20
                },
                col: {
                    span: 6
                }
            },
            fold2: false,
            model2: {},
            modelJson2: null,
            schema2: {
                properties: {
                    name_like: {
                        model: 'name',
                        widget: 'input',
                        label: '会员名称',
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    phone_like: {
                        model: 'phone',
                        widget: 'input',
                        label: '电话',
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    sex_eq: {
                        model: 'sex',
                        widget: 'select',
                        label: '性别',
                        enum: [
                            { label: '男', value: '男' },
                            { label: '女', value: '女' },
                            { label: '保密', value: '保密' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        }
                    },
                    vip_eq: {
                        model: 'vip',
                        widget: 'select',
                        label: 'Vip',
                        asyncData(resolve) {
                            const result = new Array(5).fill('').map((e, index) => {
                                return { label: `vip${index + 1}`, value: `vip${index + 1}` }
                            })
                            result.push({
                                label: 'svip',
                                value: 'svip'
                            })
                            resolve(result)
                        },
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        }
                    },
                    type_eq: {
                        model: 'type',
                        widget: 'select',
                        label: '用户类型',
                        enum: [
                            { label: '普通用户', value: '普通用户' },
                            { label: 'Vip用户', value: 'Vip用户' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        },
                        if: () => {
                            return !this.fold2
                        }
                    },
                    status_eq: {
                        model: 'status',
                        widget: 'select',
                        label: '用户状态',
                        enum: [
                            { label: '在线', value: '在线' },
                            { label: '离线', value: '离线' },
                            { label: '离开', value: '离开' },
                            { label: '冻结', value: '冻结' },
                            { label: '注销', value: '注销' }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            style: { width: '100%' }
                        },
                        if: () => {
                            return !this.fold2
                        }
                    }
                },
                ui: {
                    labelWidth: 'auto'
                },
                row: {
                    type: 'flex',
                    style: {
                        flexWrap: 'wrap'
                    },
                    gutter: 20
                },
                col: {
                    span: 6
                }
            },
            data1: [],
            data2: [],
            columns: [
                { type: 'index', label: '序号' },
                { label: '会员名称', prop: 'name' },
                { label: '电话', prop: 'phone' },
                { label: '性别', prop: 'sex' },
                { label: 'Vip', prop: 'vip' },
                { label: '用户类型', prop: 'type' },
                { label: '用户状态', prop: 'status' }
            ]
        }
    },
    mounted() {
        this.handleSerch1()
        this.handleSerch2()
    },
    methods: {
        getParams(data) {
            if (data) {
                return Object.keys(data)
                    .map(k => ({ key: k, value: data[k] }))
                    .filter(e => e.value !== null && e.value !== '')
                    .reduce((t, n) => { t[n.key] = n.value; return t }, {})
            } else {
                return {}
            }
        },
        handleFold1() {
            this.fold1 = !this.fold1;
            this.schema1.properties.search.col.span = this.fold1 ? 6 : 12
        },
        handleSerch1() {
            this.modelJson1 = this.getParams(this.model1)
            const params = Object.assign({}, this.modelJson1)
            this.data1 = this.data.filter(e => {
                const list = Object.keys(params)
                const boo = list.every(k => {
                    const keys = k.split('_')
                    if (keys.length === 2) {
                        if (/^[\s\S]*[_like]$/.test(k)) {
                            return String(e[keys[0]]).includes(String(params[k]))
                        } else if (/^[\s\S]*[_eq]$/.test(k)) {
                            return params[k] === e[keys[0]]
                        } else {
                            return params[k] === e[keys[0]]
                        }
                    } else {
                        return params[k] === e[keys[0]]
                    }
                })
                return boo
            })
        },
        handleReset1() {
            this.model1 = {}
            this.handleSerch1()
        },
        handleFold2() {
            this.fold2 = !this.fold2;
        },
        handleSerch2() {
            this.modelJson2 = this.getParams(this.model2)
            const params = Object.assign({}, this.modelJson2)
            this.data2 = this.data.filter(e => {
                const list = Object.keys(params)
                const boo = list.every(k => {
                    const keys = k.split('_')
                    if (keys.length === 2) {
                        if (/^[\s\S]*[_like]$/.test(k)) {
                            return String(e[keys[0]]).includes(String(params[k]))
                        } else if (/^[\s\S]*[_eq]$/.test(k)) {
                            return params[k] === e[keys[0]]
                        } else {
                            return params[k] === e[keys[0]]
                        }
                    } else {
                        return params[k] === e[keys[0]]
                    }
                })
                return boo
            })
        },
        handleReset2() {
            this.model2 = {}
            this.handleSerch2()
        }
    }
}
</script>

<style lang="scss" scoped>
.search{
    padding: 20px;
}
.search-bar{
    text-align: right;
}
.search-header2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
